<template>
    <van-card
      :thumb="image"
      :title="name"
      :desc="description"
      thumb-mode="aspectFill"
      thumb-size="200px"
    >
      <van-tag v-for="item in category" :key="item" type="primary">{{ item }}</van-tag>
      <template #footer>
        <van-divider />
        <!-- 添加一个 v-model 属性，用来绑定喜欢状态 -->
        <!-- 添加一个 @click 事件，用来触发喜欢逻辑 -->
        <van-button
          round
          block
          type="info"
          :icon="liked ? 'like' : 'like-o'"
          v-model="liked"
          @click="onLike"
        >
          喜欢
        </van-button>
      </template>
    </van-card>
  </template>
  
  <script>
  export default {
    name: "AnimalCard",
    props: {
      name: {
        type: String,
        required: true,
      },
      image: {
        type: String,
        required: true,
      },
      description: {
        type: String,
        required: true,
      },
      category: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        // 定义一个 data 属性，用来存放喜欢状态
        liked: false,
      };
    },
    methods: {
      // 定义一个方法，用来实现喜欢逻辑
      onLike() {
        // 切换喜欢状态
        this.liked = !this.liked;
        // 如果喜欢，就弹出一个提示框，并发送一个自定义事件给父组件
        if (this.liked) {
          this.$toast.success("已添加到喜欢列表");
          this.$emit("like", this.name);
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .van-card__thumb {
    border-radius: 10px;
  }
  </style>
  